<template>
	<div>
		<NavigationBar title-text="预约信息" />
		<Message ref="message" />
		<Loading ref="loading" fullscreen />

		<div class="server-detail-container w-full pt-160rpx pb-0rpx px-0rpx bg-hex-a0cfff overflow-x-hidden">
			<div class="w-full min-h-90vh flex-column bg-white overflow-x-hidden">
				<!-- <div class="w-full h-400rpx">
					<image class="w-full h-full" :src="serveinfo.img" mode="aspectFill" />
				</div> -->
				<div class="w-full">
					<u-field v-model="serveinfo.name" label="科室名称" placeholder="请填写科室名称" disabled> </u-field>
					<u-field v-model="serveinfo.classify" label="科室分类" placeholder="请填写科室分类" disabled> </u-field>
					<u-field v-model="serveinfo.servicename" label="服务" disabled> </u-field>
					<u-field v-model="serveinfo.fees" label="费用" disabled> </u-field>
					<u-field
						v-model="serveinfo.jobnumber"
						:label="(role || serveinfo.role) === 'doctor' ? '医生工号' : '护士工号'"
						placeholder="请填写科室名称"
						disabled
					>
					</u-field>
					<u-field
						v-model="serveinfo.userName"
						:label="(role || serveinfo.role) === 'doctor' ? '医生姓名' : '护士姓名'"
						placeholder="请填写科室名称"
						disabled
					>
					</u-field>
					<u-field v-model="serveinfo.address" label="服务地址" placeholder="请填写地址"> </u-field>
					<u-field v-model="serveinfo.time" label="预约时间" placeholder="请填写预约时间" @click="isShow = true" disabled> </u-field>
					<u-field v-model="serveinfo.phone" label="预约账号" placeholder="请填写手机号"> </u-field>
					<u-field v-model="serveinfo.realName" label="姓名" placeholder="请填写姓名" disabled> </u-field>
				</div>
				<!-- <div class="w-full">
					<div class="p-30rpx text-30rpx">
						<div>主治方面</div>
						<div class="rad w-full p-20rpx mt-20rpx">{{ serveinfo.servicename }}</div>
					</div>
				</div> -->
				<div v-if="isBtn" class="foot w-full flex items-center justify-center pb-50rpx mt-20rpx">
					<u-button type="primary" shape="circle" size="medium" @click="confirmClick">下单</u-button>
				</div>
				<div v-else class="foot w-full flex items-center justify-center pb-50rpx mt-20rpx">
					<u-button type="warning" shape="circle" size="medium" @click="cancel">取消</u-button>
				</div>
				<u-picker v-model="isShow" mode="time" :params="params" title="预约时间" start-year="2024" @confirm="bookTime"></u-picker>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import Message from '@/components/message/src/message.vue';
import type { MessageMethod } from '@/components/message';
import Loading from '@/components/loading/src/loading.vue';
import type { LoadingMethod } from '@/components/loading';
import NavigationBar from '@/components/navigation-bar/src/navigation-bar.vue';
import { gotoPage } from '@/common/utils';
import { useUserStore } from '@/store';
import { userApi, serveApi } from '@/service/api';

const userStore = useUserStore();
const message = ref<InstanceType<typeof Message> & MessageMethod>(null);
const loading = ref<InstanceType<typeof Loading> & LoadingMethod>(null);
const id = ref<string>('');
const role = ref<string>('');
const serveinfo = ref<any>({});
const isShow = ref(false);
const isBtn = ref(true);
const params = ref({
	year: true,
	month: true,
	day: true,
	hour: true,
	minute: true,
	second: false,
});
// 初始化
const init = async () => {
	const { userInfo } = storeToRefs(useUserStore());
	const res = await serveApi.getServiceInfo({ searchKey: id.value, role: role.value });
	// console.log(res.data?.data.result[0]);
	const obj = res.data?.data.result[0];
	for (let key in obj) {
		if (key !== 'img') {
			serveinfo.value[key] = obj[key];
		}
	}
	serveinfo.value['realName'] = userInfo.value?.realName;
	serveinfo.value['userId'] = userInfo.value?.userId;
	serveinfo.value['avgPath'] = userInfo.value?.avgPath;
	serveinfo.value['phone'] = '';
	serveinfo.value['time'] = '';
	serveinfo.value['address'] = '';
	serveinfo.value['role'] = role.value;
};

// 设置时间
const bookTime = (obj: object) => {
	// console.log(obj);
	serveinfo.value.time = obj.year + '-' + obj.month + '-' + obj.day + ' ' + obj.hour + ':' + obj.minute;
};

// 返回上一页
const handleNavigateBack = (): void => {
	uni.navigateBack({
		delta: 1,
	});
};

// 下单
const confirmClick = () => {
	// console.log(serveinfo.value);
	const { time, phone, address } = serveinfo.value;
	if (time && phone && address) {
		serveApi
			.submitServiceInfo(serveinfo.value)
			.then((res) => {
				// console.log(res);
				message.value.success({
					text: '下单成功',
					direction: 'top',
				});
				handleNavigateBack();
			})
			.catch((err) => {
				// console.log(err);
				message.value.error({
					text: err.msg || 'error',
					direction: 'top',
				});
			});
	} else {
		message.value.error({
			text: '请完善信息',
			direction: 'top',
		});
	}
};
// 取消订单
const cancel = () => {
	serveApi
		.cancelServiceInfo({ id: serveinfo.value.id })
		.then((res) => {
			message.value.success({
				text: '取消成功',
				direction: 'top',
			});
			handleNavigateBack();
		})
		.catch((err) => {
			console.log(err);
			
			message.value.error({
				text: err.msg || 'error',
				direction: 'top',
			});
		});
};

onLoad(async (option) => {
	if (option) {
		if (option.id && option.role) {
			id.value = option.id;
			role.value = option.role;
			// console.log(id.value, role.value);
			init();
			return;
		} else if (option.id) {
			id.value = option.id;
			const res = await serveApi.getwxServiceInfo({ id: id.value });
			console.log(res.data?.result);
			isBtn.value = false;
			serveinfo.value = res.data?.result[0];
			return;
		}
	}
	nextTick(() => uni.navigateBack());
});
onShow(() => {});
</script>

<style scoped lang="scss">
@import 'booking';
</style>
